<template>
  <div class="wrapper">
    <div class="menu_wrapper" @mouseleave="isShow = false">
      <div class="menu" v-if="menuData.length">
        <div
          class="menu_item"
          v-for="(item, index) in menuData"
          :key="index"
          @mouseenter="showSubMenu(index)"
        >
          <div>{{ item.type }}</div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div
        class="sub_menu"
        v-if="isShow && menuData.length && isShowIndex >= 0"
      >
        <div
          class="sub_menu_item"
          v-for="(item, index) in menuData[isShowIndex].children"
          :key="index"
          @click="handleSearch(item.city)"
        >
          <div class="index">{{ index + 1 }}</div>
          <div class="city_name">{{ item.city }}</div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="recommend_cities">
      <h4>推荐城市</h4>
      <div class="banner">
        <el-carousel height="180px">
          <el-carousel-item
            v-for="(item, index) in bannerData"
            :key="index"
            @click.native="handleSearch(item.city)"
          >
            <img :src="item.src" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [],
      isShow: false,
      isShowIndex: -1,
      bannerData: [
        {
          city: "北京",
          src:
            "https://dimg02.c-ctrip.com/images/100q1f000001grmfdB726_C_220_140.jpg",
        },
        {
          city: "上海",
          src:
            "https://dimg02.c-ctrip.com/images/100w1f000001gw9498A72_C_220_140.jpg",
        },
        {
          city: "广州",
          src:
            "https://dimg04.c-ctrip.com/images/100k1f000001guft92D03_C_220_140.jpg",
        },
        {
          city: "杭州",
          src:
            "https://dimg07.c-ctrip.com/images/10071f000001h702l4165_C_220_140.jpg",
        },
        {
          city: "成都",
          src:
            "https://dimg03.c-ctrip.com/images/100910000000p33rk361D_C_220_140.jpg",
        },
      ],
    };
  },
  created() {
    this.$axios({
      url: "posts/cities",
    }).then((res) => {
      console.log(res);
      this.menuData = res.data.data;
    });
  },
  methods: {
    // 显示次级菜单
    showSubMenu(index) {
      this.isShow = true;
      this.isShowIndex = index;
    },

    //提交想要搜索的城市让父页面接收
    handleSearch(city) {
      this.$emit("searchCity", city);
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  position: relative;
  .menu {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    .menu_item {
      width: 100%;
      height: 40px;
      font-size: 14px;
      padding: 0 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      cursor: pointer;

      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-icon-arrow-right {
        font-size: 20px;
        color: #ddd;
      }
      &:hover {
        color: orange;
        border-right: 0;
        .el-icon-arrow-right {
          color: inherit;
        }
      }
    }
  }
  .sub_menu {
    position: absolute;
    top: 0;
    left: 260px;
    box-sizing: border-box;
    width: 360px;
    padding: 12px 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 3;
    .sub_menu_item {
      display: flex;
      align-items: center;
      padding: 4px 0;
      cursor: pointer;
      .index {
        font-size: 24px;
        font-style: oblique;
        color: orange;
        margin-right: 18px;
      }
      .city_name {
        font-size: 14px;
        color: orange;
        margin-right: 18px;
        &:hover {
          text-decoration: underline;
        }
      }
      .desc {
        flex: 1;
        font-size: 14px;
        color: #999;
        /*单行文字溢出显示省略号*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .recommend_cities {
    width: 100%;
    margin-top: 30px;
    h4 {
      width: 100;
      font-size: 16px;
      font-weight: 400;
      padding-bottom: 12px;
      border-bottom: 1px solid #ddd;
    }
    .banner {
      margin-top: 10px;
      img {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }
    }
  }
  /deep/.el-carousel__indicator--horizontal {
    .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}
</style>